$(function(){
    
    class Register{
        constructor(){
            this.bindEvent()
        }

        bindEvent(){
            $("#phone")[0].onblur = a => {
                this.check($("#phone")[0].value , 0)
            } 
            $("#code")[0].onblur = a => {
                this.check($("#code")[0].value , 1 )
            } 
            $("#password")[0].onblur = a => {
                this.check($("#password")[0].value , 3 )
            } 
            $("#repassword")[0].onblur = a => {
                this.check($("#repassword")[0].value , 4 )
            } 
            $(document).on( "click" , a=>{
                this.registerClick()
            })
            $(document).on( "keyup" , a=>{
                this.registerClick()
            })
            $(".reg-phone").on("click" , a=>{
                $(".reg-phone").css({ "background-color" : "#eee"})
                $(".reg-email").css({ "background-color" : "white"})
                // $("#email").css({ display : "none" })
                // $("#phone").css({ display : "block" })
                this.emailRender( "phone" )
            })
            $(".reg-email").on("click" , a=>{
                $(".reg-email").css({ "background-color" : "#eee"})
                $(".reg-phone").css({ "background-color" : "white"})
                // $("#phone").css({ display : "none" })
                // $("#email").css({ display : "block" })
                this.emailRender( "email" )
            })
            $("#register").on( "click" , a=> {
                this.submitData()
            }) 
            $(".no").on( "click" , a=> {
                $(".alert").css({ display : "none" })
            })
            $(".yes").on( "click" , a=> {
                this.success()
            })
        }
        submitData(){
            var option = {
                url : "http://localhost:8888/users/register",
                type : "POST" ,
                data : {
                    username : $("#phone")[0].value,
                    password : $("#password")[0].value,
                    rpassword : $("#repassword")[0].value,
                    nickname : $("#nick")[0].value
                },
                dataType : "json"
            }
            $.post( option ).then( res => {
                if( res.code === 1 ){
                    this.success()
                }else{
                    this.fail()
                }
            })
        }
        registerClick(){
            if($("#phone")[0].value && $("#password")[0].value && $("#repassword")[0].value && $("#code")[0].value){
                $("#register").css({ opacity : 1 })
            }else{
                $("#register").css({ opacity : 0.6 })
            }
        }
        check( data , index ){ 
            if( !(/[\s\S]{6,}/.test(data)) ){
                $(".tips")[index].style.display = "block"
                $(".tips")[index].classList.add("red")
            }else{
                $(".tips")[index].style.display = "none"
            }
        }
        checkCode( data ){
            if( !(/[\s\S]{6,}/.test(data)) ){
                $(".tips")[1].style.display = "block"
                $(".tips")[1].classList.add("red")
            }else{
                $(".tips")[1].style.display = "none"
            }
        }

        fail(){
            $(".telephone").text( $("#phone")[0].value )
            $(".alert").css({ display : "block" })
            this.bindEvent()
        }
        success(){
            // cookie( "username" , $("#phone")[0].value )
            // cookie( "password" , $("#password")[0].value )
            sessionStorage.setItem( "usermsg" , JSON.stringify({
                username : $("#phone")[0].value,
                password : $("#password")[0].value
            }))
            location.href = "http://localhost:3000/dist/login.html"
        }
        emailRender( type ){
            var html = ''
            if( type === "phone"){
                html = `<input type="text" name="" id="phone" placeholder="手机号">
                        <input type="text" name="" id="code" placeholder="短信验证码">
                        <input type="text" name="" id="password" placeholder="密码">
                        <input type="text" name="" id="repassword" placeholder="确认密码">
                        <input type="text" name="" id="born" placeholder="出生日期">`
            }else{
                html = `
                        <input type="text" name="" id="email" placeholder="邮箱地址">
                        <input type="text" name="" id="code" placeholder="邮箱验证码">
                        <input type="text" name="" id="password" placeholder="密码">
                        <input type="text" name="" id="repassword" placeholder="确认密码">
                        <input type="text" name="" id="born" placeholder="出生日期">`
            }
            console.log(1);
            
            $(".render").html( html )

        }


    }


    var register = new Register()



})